<!--
  根组件文件
  这是整个ERP应用的主入口组件，包含应用的整体布局结构
  布局采用Element Plus的容器组件实现，包括头部、侧边栏、主内容区和底部
-->
<script setup>
/**
 * 根组件的脚本部分
 * 负责导入所需图标组件和处理全局逻辑
 */

// 动态组件映射，将图标名称映射到实际的图标组件
// 用于在菜单中动态渲染图标
// iconComponents: 图标组件映射对象，key为图标名称，value为对应的Element Plus图标组件
const iconComponents = {
  Document: 'Document',  // 文档图标
  User: 'User',          // 用户图标
  Shop: 'Shop',          // 商店图标
  Goods: 'Goods',        // 商品图标
  List: 'List',          // 列表图标
  Plus: 'Plus',          // 加号图标
  House: 'House',        // 房屋图标
  Folder: 'Folder',      // 文件夹图标
  Printer: 'Printer',    // 打印机图标
  Upload: 'Upload',      // 上传图标
  Money: 'Money',        // 货币图标
  Tickets: 'Tickets'     // 票据图标
}

// 定义菜单数据
// 菜单结构采用树形结构，支持多级菜单
// menuRoutes: 菜单路由配置数组，定义了应用的导航菜单结构
const menuRoutes = [
  // 工作台菜单项
  {
    index: '/dashboard',     // 菜单项唯一标识，对应路由路径
    title: '工作台',          // 菜单项显示文本
    icon: 'House'            // 菜单项图标名称
  },
  // 订单管理菜单项（包含子菜单）
  {
    index: '1',              // 父级菜单项标识
    title: '订单管理',        // 父级菜单项显示文本
    icon: 'Document',        // 父级菜单项图标
    children: [              // 子菜单项数组
      {
        index: '/orders',    // 子菜单项路由路径
        title: '订单列表',    // 子菜单项显示文本
        icon: 'List'         // 子菜单项图标
      },
      {
        index: '/orders/add', // 子菜单项路由路径
        title: '添加订单',     // 子菜单项显示文本
        icon: 'Plus'          // 子菜单项图标
      },
      {
        index: '/scan-storage', // 子菜单项路由路径
        title: '扫码入库',       // 子菜单项显示文本
        icon: 'Upload'          // 子菜单项图标
      },
      {
        index: '/payment-bills', // 子菜单项路由路径
        title: '收款账单',        // 子菜单项显示文本
        icon: 'Money'            // 子菜单项图标
      },
      {
        index: '/delivery-orders', // 子菜单项路由路径
        title: '发货单列表',        // 子菜单项显示文本
        icon: 'Tickets'            // 子菜单项图标
      }
    ]
  },
  // 客户管理菜单项（包含子菜单）
  {
    index: '2',              // 父级菜单项标识
    title: '客户管理',        // 父级菜单项显示文本
    icon: 'User',            // 父级菜单项图标
    children: [              // 子菜单项数组
      {
        index: '/customers', // 子菜单项路由路径
        title: '客户列表',    // 子菜单项显示文本
        icon: 'List'         // 子菜单项图标
      }
    ]
  },
  // 供应商管理菜单项（包含子菜单）
  {
    index: '3',              // 父级菜单项标识
    title: '供应商管理',      // 父级菜单项显示文本
    icon: 'Shop',            // 父级菜单项图标
    children: [              // 子菜单项数组
      {
        index: '/suppliers', // 子菜单项路由路径
        title: '供应商列表',  // 子菜单项显示文本
        icon: 'List'         // 子菜单项图标
      }
    ]
  },
  // 产品管理菜单项（包含子菜单）
  {
    index: '4',              // 父级菜单项标识
    title: '产品管理',        // 父级菜单项显示文本
    icon: 'Goods',           // 父级菜单项图标
    children: [              // 子菜单项数组
      {
        index: '/products',  // 子菜单项路由路径
        title: '产品列表',    // 子菜单项显示文本
        icon: 'List'         // 子菜单项图标
      },
      {
        index: '/product-categories', // 子菜单项路由路径
        title: '产品分类',             // 子菜单项显示文本
        icon: 'Folder'                // 子菜单项图标
      }
    ]
  },
  // 打印模板设计菜单项（独立菜单项，无子菜单）
  {
    index: '/print-template-design',  // 菜单项路由路径
    title: '打印模板设计',             // 菜单项显示文本
    icon: 'Printer'                   // 菜单项图标
  }
]
</script>

<template>
  <!-- 应用外层容器，用于实现固定底部布局 -->
  <div class="app-wrapper">
    <!-- Element Plus主容器，包含应用的主要布局 -->
    <el-container class="app-container">
      <!-- 头部区域 -->
      <el-header class="app-header">
        <div class="header-content">
          <!-- Logo区域 -->
          <div class="logo-section">
            <el-icon class="logo-icon"><Goods /></el-icon>
            <span class="logo-text">上海日晖爱婴纪念品有限公司ERP管理系统</span>
          </div>
          <!-- 用户信息区域 -->
          <div class="user-section">
            <el-dropdown>
              <span class="user-info">
                <!-- 用户头像 -->
                <el-avatar :size="30" icon="User" />
                <span class="username">管理员</span>
              </span>
              <!-- 用户下拉菜单 -->
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <!-- 主体容器，包含侧边栏和主内容区 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="220px" class="app-aside">
          <!-- 侧边栏菜单 -->
          <el-menu
            class="sidebar-menu"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409eff"
            :default-active="$route.path"
            :router="true"
          >
            <template v-for="item in menuRoutes" :key="item.index">
              <!-- 如果有子菜单，渲染为el-sub-menu -->
              <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.index">
                <template #title>
                  <el-icon>
                    <component :is="iconComponents[item.icon]" />
                  </el-icon>
                  <span>{{ item.title }}</span>
                </template>
                <!-- 渲染子菜单项 -->
                <el-menu-item
                  v-for="child in item.children"
                  :key="child.index"
                  :index="child.index"
                >
                  <el-icon>
                    <component :is="iconComponents[child.icon]" />
                  </el-icon>
                  <span>{{ child.title }}</span>
                </el-menu-item>
              </el-sub-menu>

              <!-- 如果没有子菜单，渲染为el-menu-item -->
              <el-menu-item v-else :index="item.index">
                <el-icon>
                  <component :is="iconComponents[item.icon]" />
                </el-icon>
                <span>{{ item.title }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main class="app-main">
          <!-- 路由视图容器，根据路由显示对应的页面组件 -->
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>

    <!-- 底部区域 -->
    <el-footer class="app-footer">
      <div class="footer-content">
        <span>Copyright © 2021-2025 ERP管理系统</span>
      </div>
    </el-footer>
  </div>
</template>

<style scoped>
/**
 * 根组件样式部分
 * 使用scoped属性确保样式只作用于当前组件
 */

/* 应用外层容器样式 */
.app-wrapper {
  min-height: 100vh;           /* 最小高度为视口高度 */
  display: flex;               /* 使用flex布局 */
  flex-direction: column;      /* 垂直方向排列 */
  background-color: #f0f2f5;   /* 背景色 */
}

/* 应用主容器样式 */
.app-container {
  flex: 1;                     /* 占据剩余空间 */
  display: flex;               /* 使用flex布局 */
  flex-direction: column;      /* 垂直方向排列 */
}

/* 应用头部样式 */
.app-header {
  background-color: #2d3a4b;   /* 背景色 */
  color: #ffffff;              /* 文字颜色 */
  padding: 0;                  /* 内边距 */
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.12); /* 阴影效果 */
  z-index: 100;                /* 层级 */
}

/* 头部内容区域样式 */
.header-content {
  display: flex;               /* 使用flex布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center;         /* 垂直居中 */
  height: 60px;                /* 高度 */
  padding: 0 20px;             /* 水平内边距 */
}

/* Logo区域样式 */
.logo-section {
  display: flex;               /* 使用flex布局 */
  align-items: center;         /* 垂直居中 */
}

/* Logo图标样式 */
.logo-icon {
  font-size: 24px;             /* 字体大小 */
  margin-right: 10px;          /* 右外边距 */
  color: #409eff;              /* 颜色 */
}

/* Logo文字样式 */
.logo-text {
  font-size: 20px;             /* 字体大小 */
  font-weight: 600;            /* 字体粗细 */
  color: #ffffff;              /* 颜色 */
}

/* 用户区域样式 */
.user-section {
  display: flex;               /* 使用flex布局 */
  align-items: center;         /* 垂直居中 */
}

/* 用户信息样式 */
.user-info {
  display: flex;               /* 使用flex布局 */
  align-items: center;         /* 垂直居中 */
  cursor: pointer;             /* 鼠标指针样式 */
  color: #ffffff;              /* 颜色 */
}

/* 用户名样式 */
.username {
  margin-left: 10px;           /* 左外边距 */
  font-size: 14px;             /* 字体大小 */
}

/* 侧边栏样式 */
.app-aside {
  background-color: #304156;   /* 背景色 */
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); /* 阴影效果 */
  transition: width 0.28s;     /* 宽度过渡动画 */
}

/* 侧边栏菜单样式 */
.sidebar-menu {
  border: none;                /* 无边框 */
  height: 100%;                /* 高度100% */
}

/* 侧边栏菜单项悬停效果 */
.sidebar-menu :deep(.el-sub-menu__title:hover),
.sidebar-menu :deep(.el-menu-item:hover) {
  background-color: #253344 !important; /* 悬停背景色 */
}

/* 主内容区样式 */
.app-main {
  flex: 1;                     /* 占据剩余空间 */
  overflow: auto;              /* 自动滚动 */
  padding: 20px;               /* 内边距 */
  background-color: #f0f2f5;   /* 背景色 */
}

/* 应用底部样式 */
.app-footer {
  background-color: #ffffff;   /* 背景色 */
  color: #606266;              /* 文字颜色 */
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  z-index: 100;                /* 层级 */
  flex-shrink: 0;              /* 不收缩 */
}

/* 底部内容区域样式 */
.footer-content {
  display: flex;               /* 使用flex布局 */
  justify-content: center;     /* 水平居中 */
  align-items: center;         /* 垂直居中 */
  height: 50px;                /* 高度 */
  font-size: 14px;             /* 字体大小 */
}
</style>
